import {View, Text, CoverImage} from '@tarojs/components'
import {observer} from 'mobx-react'
import {
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction,
  AtInput
} from 'taro-ui'

import {useContext, useEffect, useState} from 'react'
import {useDidHide, useDidShow} from '@tarojs/taro'
import {videoSurveillanceStore} from './model'
import {AutoIcon} from './components'
import './index.scss'
import {toContactUs} from '@/utils/pageRedirect'
import Taro from '@tarojs/taro'
import {editCameraNameApi} from '@/api/user'

const Videosurveillance = () => {
  const {redirectToEzvizMiniP, updatePageDataSource, cameraList, closeBtn} =
    useContext(videoSurveillanceStore)

  const [isOpenModal, setIsOpenModal] = useState(false)
  const [currentEditCameraName, setCurrentEditCameraName] = useState('')
  const [currentEditCameraId, setCurrentEditCameraId] = useState('')
  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Videosurveillance useEffect')
    closeBtn()
  }, [cameraList])
  // 对应 onShow
  useDidShow(() => {
    console.log('Videosurveillance useDidShow')
    updatePageDataSource()
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Videosurveillance useDidHide')
  })

  // 修改摄像头名称的点击事件
  const editNameClick = async item => {
    console.log(item)
    setCurrentEditCameraId(item.cameraId)
    setCurrentEditCameraName(item.cameraName)
    setIsOpenModal(true)
  }

  // 修改摄像头名称弹窗的关闭点击事件
  const editModalHandleClose = () => {
    setIsOpenModal(false)
  }
  // 修改摄像头名称弹窗的取消点击事件
  const editModalHandleCancel = () => {
    console.log(111)

    setIsOpenModal(false)
  }
  // 修改摄像头名称弹窗的确定点击事件
  const editModalHandleConfirm = async () => {
    let data = {
      cameraId: currentEditCameraId,
      cameraName: currentEditCameraName
    }
    await editCameraNameApi(data)
      .then(res => {
        console.log(res, 'dasfasdfdfsdgsdgffffffffffffdfsgfdhdhy')

        Taro.showModal({
          title: '提示',
          content: `修改成功`
        })
      })
      .catch(() => {
        Taro.showModal({
          title: '提示',
          content: `修改失败`
        })
      })

    console.log('确定')
    updatePageDataSource()
    setIsOpenModal(false)
  }

  // 修改摄像头名称弹出框的change事件
  const editCameraNameModalInputChange = e => {
    setCurrentEditCameraName(e)
  }

  return (
    <View className="container w-screen h-screen px-16 py-24 overflow-y-auto">
      {cameraList.map(item => (
        <View
          className={`h-120 w-150 bg-white rounded-8 px-16 mt-4 mb-24 shadow-md transition-all float-left overflow-hidden container_view`}
        >
          {/* <View className="inbetweening_box">
            <CoverImage
              className="img_edit_icon"
              src={require('./images/sxt.png')}
            />
          </View> */}
          <View className="h-64 flex items-center justify-between">
            <View className="hanzi text-14 text-xx_text font-bold text_overflow">
              {item.cameraName}
            </View>
          </View>
          <View className="icon_view">
            <CoverImage
              onClick={() => {
                editNameClick(item)
              }}
              className="img_edit_icon"
              src={require('./images/xg.png')}
            />

            <CoverImage
              onClick={() => {
                redirectToEzvizMiniP(item)
              }}
              className="img_edit_icon"
              src={require('./images/bf.png')}
            />
            {/* <AutoIcon
              onClick={() => {
                redirectToEzvizMiniP(item)
              }}
            ></AutoIcon> */}
          </View>
          <View>
            <AtModal
              isOpened={isOpenModal}
              cancelText="取消"
              confirmText="确认"
              onClose={editModalHandleClose}
              onCancel={editModalHandleCancel}
              onConfirm={editModalHandleConfirm}
            >
              <AtModalHeader>修改摄像头名称</AtModalHeader>
              <AtModalContent>
                <text style="font-size:16px;color:gray">摄像头名称</text>
                <AtInput
                  type="text"
                  value={currentEditCameraName}
                  onChange={e => {
                    editCameraNameModalInputChange(e)
                  }}
                  clear
                />
              </AtModalContent>
              <AtModalAction>
                <button onClick={editModalHandleCancel}>取消</button>
                <button onClick={editModalHandleConfirm}>确定</button>
              </AtModalAction>
            </AtModal>
          </View>

          {/* <View className="h-64 flex items-center justify-end gap-x-12">
            <Button
              className="h-32 rounded-4 bg-danger px-12 text-12 text-white"
              onClick={e => {
                e.stopPropagation()
                handleDelCamera()
              }}
            >
              删除
            </Button>
            <Button
              className="h-32 rounded-4 bg-primary px-12 text-12 text-white"
              onClick={e => {
                e.stopPropagation()
                toEditCamera()
              }}
            >
              编辑
            </Button>
            <Button
              className="h-32 rounded-4 bg-success px-12 text-12 text-white"
              onClick={e => {
                e.stopPropagation()
                redirectToEzvizMiniP(item)
              }}
            >
              播放
            </Button>
          </View> */}
        </View>
      ))}

      {/* <View
        className="h-64 bg-white rounded-8 px-16 mt-4 mb-24 shadow-md transition-all overflow-hidden flex items-center justify-center"
        // onClick={e => {
        //   e.stopPropagation()
        //   toAddVideoSurveillance()
        // }}
      >
        <Text
          className="text-16 text-primary tracking-wider text-center font-medium"
          onClick={() => {
            Taro.showModal({
              content: '添加摄像头需要联系售后人员',
              confirmText: '联系售后',
              success(result) {
                if (result.confirm) {
                  toContactUs()
                }
              }
            })
          }}
        >
          添加摄像头
        </Text>
      </View> */}
    </View>
  )
}
export default observer(Videosurveillance)
